<template>
  <div class="docs-box">
    <!-- 聊天界面 -->
    <chat-interface 
      v-show="activeComponent === 'chat'" 
      :useData="false" 
      :queryTypes="queryTypes"
    ></chat-interface>
    
    <!-- 资料下载界面 -->
    <div v-show="activeComponent === 'docs'">
      <div class="docs-top">
        <div class="docs-title">
          调查资料检索
        </div>
        <el-input 
          @keyup.enter.native="search" 
          placeholder="请输入关键字快捷查询" 
          class="docs-input" 
          v-model="keyword" 
          style="width: 600px"
        />
        <div class="docs-bottom">
          <div class="docs-bottom-item" @click="searchCategory('00')">
            <i class="el-icon-tickets" style="font-size: 30px"></i>
            通知文件
          </div>
          <div class="docs-bottom-item" @click="searchCategory('01')">
            <i class="el-icon-notebook-2" style="font-size: 30px"></i>
            技术规范
          </div>
          <div class="docs-bottom-item" @click="searchCategory('02')">
            <i class="el-icon-notebook-1" style="font-size: 30px"></i>
            培训素材
          </div>
        </div>
      </div>
      <div class="docs-list">
        <div class="docs-box">
          <el-button 
            type="primary" 
            size="small" 
            style="background: #3a8f7b; border: 1px solid #3a8f7b"
          >
            批量下载
          </el-button>
        </div>
        <div v-loading="loading">
          <doc-list :options="options" />
          <el-empty v-if="!options.length" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import DocList from "@/views/docs/components/DocList.vue";
import { getInformationList } from "@/api/information";
import ChatInterface from '@/components/ChatInterface.vue';

@Component({
  components: { DocList, ChatInterface }
})
export default class Docs extends Vue {
  private keyword = '';
  private category = '0';
  private total = 0;
  private options: any = [];
  private activeComponent: any = 'docs'; // 默认显示资料下载界面
  private queryTypes = [{ value: 'Q&A', label: 'Q&A' }];
  private loading = false;

  async search() {
    this.loading = true;
    let formData: any = {
      name: this.keyword,
      category: this.category || '0'
    };
    let { rows, total }: any = await getInformationList(formData);
    this.loading = false;
    this.options = rows;
    this.total = total;
  }

  searchCategory(category: string) {
    this.category = category;
    this.search();
  }

  mounted() {
    this.search();

    (this as any).$bus.$on('docsItemClick', (item: any) => {
      switch (item.label) {
        case '线上答疑':
          this.activeComponent = 'chat';  // 切换到聊天界面
          break;
        case '资料下载':
          this.activeComponent = 'docs';  // 切换到资料下载界面
          break;
      }
    });
  }

  beforeDestroy() {
    // 组件销毁前移除事件监听
    (this as any).$bus.$off('docsItemClick');
  }
}
</script>

<style lang="scss" scoped>
.docs-box {
  margin-bottom: 6px;
  
  .docs-top {
    background: #e2e2e2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
    padding: 20px 0 40px 0;
    
    .docs-title {
      font-size: 28px;
      font-weight: bold;
      text-align: center;
      color: #3a8f7b;
      position: relative;
      padding-bottom: 6px;
      
      &:after {
        content: '';
        position: absolute;
        width: 60%;
        background: #3a8f7b;
        height: 3px;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    
    .docs-bottom {
      display: flex;
      align-items: center;
      gap: 50px;
      
      .docs-bottom-item {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        color: #ffffff;
        font-size: 15px;
        padding: 18px 60px;
        border-radius: 4px;
        background: #0b6057;
        border: 2px solid #abd8d1;
        cursor: pointer;
        transition: all 0.3s;
        
        &:hover {
          background: #0d7a6f;
          transform: translateY(-3px);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
      }
    }
  }
  
  .docs-list {
    background: #ffffff;
    padding: 16px;
    
    .docs-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>